@import '/style/app-color.scss';
/* #ifndef UNI-APP-X */
// 对指定布局添加 box-sizing: border-box 属性 防止画边框超出指定大小
view,
text,
button,
input,
:before,
:after {
	box-sizing: border-box;
}
//  微信小程序去除button默认样式 https://blog.csdn.net/weixin_34261415/article/details/93606177
button { padding: 0; margin: 0; background-color: transparent; background: none; outline: none; border: none; border-radius:0; }
// button的边框样式是通过::after方式实现的
button::after { border: none; }
// 隐藏scroll-view的滚动条
::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}
/* #endif */


// 默认页面背景色
.page-class {
	background-color: $color-f6;
	color: $color-222;
	font-size: 26rpx;
	line-height: 1.4;
	width: 750rpx;
}


// 超出省略,最多5行
@for $i from 1 through 5 {
	.line-h#{$i} {
		overflow: hidden;
		text-overflow: ellipsis;

		@if $i =='1' {
			white-space: nowrap;
		}

		@else {
			lines: $i;
			// -webkit-box-orient: vertical !important;
			// display: -webkit-box !important;
			// 自动换行 normal:默认规则 break-all:允许单词内换行(不留白) break-word(废弃)
			// word-break: break-all;
			// 允许长的内容自动换行
			// word-wrap: break-word;
		}
	}
}


// 定义字体(px)单位，小于20都为px单位字体
@for $i from 9 to 20 {
	.fs-#{$i} {
		font-size: $i + px;
	}
}
// 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
@for $i from 20 through 40 {
	.fs-#{$i} {
		font-size: $i + rpx;
	}
}
.fbold {font-weight: bold}
// 文字划线
// .text-through {text-decoration:line-through;}
// 文字下划线
// .text-underline {text-decoration:underline;}
// 文字对齐
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}


// 定义内,外边距,圆角，历遍1-80
@for $i from 0 through 80 {
	// 只要双数和能被5除尽的数
	@if $i % 2 == 0 or $i % 5 == 0 {
		// 结果如： m-30,mx-30,my-30,p-30,br-15
		.m-#{$i} {
			margin: $i + rpx!important;
		}
		.mx-#{$i} {
			margin-left: $i + rpx!important;
			margin-right: $i + rpx!important;
		}
		.my-#{$i} {
			margin-top: $i + rpx!important;
			margin-bottom: $i + rpx!important;
		}
		.p-#{$i} {
			padding: $i + rpx!important;
		}
		.px-#{$i} {
			padding-left: $i + rpx!important;
			padding-right: $i + rpx!important;
		}
		.py-#{$i} {
			padding-top: $i + rpx!important;
			padding-bottom: $i + rpx!important;
		}
		.br-#{$i}{
			border-radius: $i + rpx!important;
		}
		
		@each $short, $long in l left, t top, r right, b bottom {
			// 结果如： m-l-30
			.m-#{$short}-#{$i} {
				margin-#{$long}: $i + rpx!important;
			}
			
			// 定义内边距
			.p-#{$short}-#{$i} {
				padding-#{$long}: $i + rpx!important;
			}
		}
		
		@each $short, $long in t top, b bottom {
			// 定义圆角
			.br-#{$short}-#{$i} {
				border-#{$long}-right-radius: $i + rpx!important;
				border-#{$long}-left-radius: $i + rpx!important;
			}
		}
	}
}

// flex布局
.flex {display:flex;flex-direction:row!important;}
.flex-row {display:flex;flex-direction:row!important;}
.flex-column {display:flex;flex-direction:column!important;}
.flex-row-reverse {display:flex;flex-direction:row-reverse!important;}
.flex-column-reverse {display:flex;flex-direction:column-reverse!important;}
// 自动换行
.flex-wrap {display:flex;flex-wrap: wrap;}
 // 不换行
.flex-nowrap {display:flex;flex-wrap: nowrap;}
.justify-start {justify-content: flex-start;}
.justify-end {justify-content: flex-end;}
.justify-between {justify-content: space-between;}
.justify-center {justify-content: center;}
.align-center {align-items: center;}
.align-stretch {align-items: stretch;}
.align-start {align-items: flex-start;}
.align-end {align-items: flex-end;}
// .align-baseline {align-items: baseline}
.content-start {align-content: flex-start;}
.content-end {align-content: flex-end;}
.content-center {align-content: center;}
.content-between {align-content: space-between;}
.content-around {align-content: space-around;}
.content-stretch {align-content: stretch;}
@for $i from 1 through 10 {
	.flex-#{$i} {
		flex: $i!important;
	}
}
.flex-shrink {flex-shrink: 0;}
// 定位 - 固定顶部
.fixed-top {position: fixed;top: 0;right: 0;left: 0;z-index: $zIndex999;}
// 定位 - 固定底部
.fixed-bottom {position: fixed;right: 0;bottom: 0;left: 0;z-index: $zIndex999;}
// 定位
.posit-relative {position: relative;}
.posit-absolute {position: absolute;}
.posit-fixed {position: fixed;}

// 边框
.border {border-width: 1px;border-style: solid;border-color: $color-f6;}
.border-cmain {border-width: 1px;border-style: solid;border-color: $color-main;}
.border-top {border-top-width: 1px;border-top-style: solid;border-top-color: $color-f6;}
.border-right {border-right-width: 1px;border-right-style: solid;border-right-color: $color-f6;}
.border-bottom {border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: $color-f6;}
.border-left {border-left-width: 1px;border-left-style: solid;border-left-color: $color-f6;}


// scroll-view
.scroll-row {width: 100%;white-space: nowrap;}
// .scroll-row-item {display: inline-block!important;}

// 顶部状态栏高度
// .status-bar-height {height: var(--status-bar-height);width: 100%;}
// .view-height-statusbar {height: calc(100vh - var(--status-bar-height));}
// .view-height-statusbar-safearea {height: calc(100vh - var(--status-bar-height) - var(--safe-area-inset-bottom));}
// .safe-area-view {
// 	height: 0rpx;
// 	padding-bottom: 0;
// 	padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
// 	padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
// }
.w-100 {width: 100%;}
.h-100 {height: 100%;}
.border-box {box-sizing: border-box;}
.swiper-box {flex: 1;}
.swiper-item {height: 100%;width: 750rpx;}
